<template>
    <div>
        <div v-if="status.status == 1">
            <p class="title"><span class="iconfont icon-shenhe icon"></span>提交成功，正在审核中...</p>
        </div>
        <div v-if="status.status == 2">
            <p class="title"><span class="iconfont icon-tongguo icon"></span>认证通过,请返回个人中心查看</p>
        </div>
        <div v-if="status.status == 3">
            <p class="title"><span class="iconfont icon-jujue icon-1 icon"></span>认证未通过</p>
            <p class="title">拒绝原因:{{status.remark}}</p>
            <p class="title">请重新认证</p>
            <mt-button class="btn" @click="again">重新认证</mt-button>
        </div>
        <form  enctype="multipart/form-data" @submit.prevent="applyDelivery" v-else-if="status.status == 0">
            <section class="login_message select_border">
                <mt-picker
                    :slots="typeList"
                    @change="onValuesChange"
                    :visibleItemCount="1"
                    :itemHeight="50"
                ></mt-picker>
                <i class="iconfont icon-shangxiahuadong slide"></i>
            </section>
            <section class="login_message">
                <input
                    type="number"
                    placeholder="请输入银行卡卡号"
                    v-model="bank_no"
                />
            </section>
            <section class="login_message">
                <input
                    type="text"
                    placeholder="请输入银行卡卡户行"
                    v-model="bank_name"
                />
            </section>
            <section class="login_message">
                <input
                    type="text"
                    maxlength="11"
                    placeholder="院系"
                    v-model="faculty"
                    v-show="type == '学生'"
                />
            </section>
            <section class="login_message">
                <input
                    type="text"
                    maxlength="11"
                    placeholder="专业"
                    v-model="major"
                    v-show="type == '学生'"
                />
            </section>
            <section class="login_message">
                <input
                    type="text"
                    maxlength="11"
                    placeholder="班级"
                    v-model="className"
                    v-show="type == '学生'"
                />
            </section>
            <section class="login_message">
                <input
                    type="number"
                    maxlength="11"
                    placeholder="学生证号码"
                    v-model="studentCardNum"
                    v-show="type == '学生'"
                />
            </section>
            <section class="login_message">
                <input
                    type="number"
                    maxlength="11"
                    placeholder="身份证号码"
                    v-model="idcardNum"
                    v-show="type == '专业配送员'"
                />
            </section>
            <section class="login_message">
                <input
                    type="text"
                    placeholder="请选择配送宿舍楼栋"
                    v-model="floors2"
                    readonly
                    @click="onPopupShow"
                />
            </section>
            <mt-popup v-model="popupVisible" position="bottom">
                <div class="btn selected" @click="()=>{popupVisible=!popupVisible}">确认</div>
                <mt-checklist title="选择楼栋" v-model="floors" :options="floorsList" @change="checkon"></mt-checklist>
            </mt-popup>
            <div class="upload-box">
                <div class="upload-content" v-show="type == '学生'">
                    <p>学生证</p>
                    <Upload title="学生证" subTitle="将学生证证件置于镜头中央拍摄，并注意减少反光" @getImg="getImg"></Upload>
                </div>
                <div  v-show="type == '专业配送员'" class="upload-content">
                    <p>身份证</p>
                    <Upload title="身份证" subTitle="将身份证证正面置于镜头中央拍摄，并注意减少反光" @getImg="getImg"></Upload>
                </div>
                <div  v-show="type == '专业配送员'" class="upload-content">
                    <p>身份证反面</p>
                    <Upload title="身份证反面" subTitle="将身份证证反面置于镜头中央拍摄，并注意减少反光" @getImg="getImg"></Upload>
                </div>
                <div  v-show="type == '专业配送员'" class="upload-content">
                    <p>手持身份证</p>
                    <Upload title="手持身份证" subTitle="请手持身份证站在镜头中央拍摄，并注意减少反光" @getImg="getImg"></Upload>
                </div>
                <div  v-show="type == '学生'" class="upload-content">
                    <p>手持学生证</p>
                    <Upload title="手持学生证" subTitle="请手持学生证站在镜头中央拍摄，并注意减少反光" @getImg="getImg"></Upload>
                </div>
            </div>
            <div class="checkBox">
                <label><input type="checkbox" class="check-pro" v-model="checked">同意<router-link to="/protocol" class="protocol">《配送员协议》</router-link></label>
            </div>
            <input class="btn" type="submit" value="提交"/>
        </form>
    </div>
</template>
<script>
import Upload from "../components/upload";
import { getFloorList, applyDelivery, uploadImg,userStatus } from "../api";
import {Toast} from 'mint-ui'
export default {
    data() {
        return {
            faculty: "",
            major: "",
            className: "",
            studid: Number,
            idcard: Number,
            floors: [],
            floors2: [],
            floors3: [],
            floorsList: [],
            popupVisible: false,
            type: "学生",
            studentCard: File,
            studentCard1: File,
            studentCardNum: Number,
            idCard1: File,
            idCard2: File,
            idcard3: File,
            idcardNum: Number,
            status:{},
            checked:true,
            bank_no:Number,
            bank_name:"",
            typeList: [
                {
                    flex: 1,
                    values: ["请选择您的身份"]
                },
                {
                    flex: 1,
                    values: ["学生","专业配送员"]
                }
            ]
        };
    },
    created() {
        this.FloorList();
        this.getUserStutas();
    },
    methods: {
        again(){
            this.status.status = 0;
        },
        getUserStutas(){
            const data = {token:this.$store.getters.token,id:this.$store.getters.userInfo.id}
            userStatus(data).then(res=>{
                console.log(res.data);
                this.status = res.data;
                this.$store.commit('UPDATE_STATUS',res.data)
            })
        },
        applyDelivery() {
            let data;
            if(!this.checked){Toast("同意配送员协议后可注册成为配送员");return}
            if(this.type == '学生'){
                data = {
                    id: this.$store.getters.userInfo.id,
                    type: this.type == "学生" ? 2 : 3,
                    faculty: this.faculty,
                    major: this.major,
                    class: this.className,
                    studid: this.studentCardNum,
                    stuid_pic: this.studentCard,
                    stuid_hold: this.studentCard1,
                    delivery_storied: this.floors3.toString(),
                    phone: this.$store.getters.userInfo.phone,
                    token: this.$store.getters.token,
                    bank_no:this.bank_no,
                    bank_name:this.bank_name
                }
                if(!data.studid){
                    Toast("请输入学生证号码")
                    return;
                }else if(!data.stuid_pic){
                    Toast("请添加学生证照片")
                    return;
                }else if(!data.stuid_hold){
                    Toast("请添加手持学生证照片")
                    return;
                }
            }else {
                data = {
                    id: this.$store.getters.userInfo.id,
                    type: this.type == "学生" ? 2 : 3, 
                    idcard:this.idcardNum,
                    idcard_front:this.idCard1,
                    idcard_reverse:this.idcard2,
                    idcard_hold:this.idcard3,
                    delivery_storied: this.floors3.toString(),
                    phone: this.$store.getters.userInfo.phone,
                    token: this.$store.getters.token,
                    bank_no:this.bank_no,
                    bank_name:this.bank_name
                }
                if(!data.idcard){
                    Toast("请输入身份证号码");
                    return;
                }else if(!data.idcard_front){
                    Toast("请添加身份证正面照")
                    return;
                }else if(!data.idcard_reverse){
                    Toast("请添加身份证反面照片")
                    return;
                }else if(!data.idcard_hold){
                    Toast("请添加手持身份证照片")
                    return;
                }
            }
            if(!data.type){
                Toast("请选择配送员身份");
                return;
            }else if(!data.delivery_storied){
                Toast("请选择可配送楼栋");
                return;                                                                                                                        
            }else if(!data.phone){
                Toast("请填写手机号码");
                return;
            }else if(!data.bank_name){
                Toast("请填写银行卡开户行")
                return;
            }else if(!data.bank_no){
                Toast("请输入银行卡卡号");
                return;
            }
            // console.log(data);
            // return;
            applyDelivery(data).then(res => {
                console.log(res);
                if(res.code !==200){
                    Toast(res.msg)
                }else{
                    Toast("上传成功,正在审核")
                this.$router.push("/user")
                }
            }).catch(err=>{
                Toast("上传失败，请核对后再试")
            });
        },
        getImg(data) {
            console.log(data);
            switch (data[1]) {
                case "学生证":
                    this.studentCard = data[0];
                    break;
                case "身份证正面":
                    this.idCard1 = data[0];
                    break;
                case "身份证反面":
                    this.idcard2 = data[0];
                    break;
                case "手持身份证":
                    this.idcard3 = data[0];
                    break;
                case "手持学生证":
                    this.studentCard1 = data[0];
                    break;
            }
        },
        onValuesChange(picker, values) {
            this.type = values[1];
        },
        checkon: function() {
            console.log(this.floors);
            let floorsName = [];
            let floorsId = [];
            for (let i of this.floors) {
                floorsName.push(i.name);
                floorsId.push(i.id);
            }
            this.floors2 = floorsName;
            this.floors3 = floorsId;
            // console.log(this.floors3.toString())
        },
        onPopupShow() {
            this.popupVisible = !this.popupVisible;
        },
        FloorList() {
            const data = this.$store.getters.userInfo.school_id;
            console.log(data);
            getFloorList(data).then(res => {
                console.log(res);
                if (res.data.data.length) {
                    this.floorsList = res.data.data;
                    for (let i of this.floorsList) {
                        i.label = i.name;
                    }
                } else {
                    this.floorsList = [
                        { label: "暂无宿舍楼栋选择", disabled: true }
                    ];
                }
            });
        }
    },
    components: { Upload }
};
</script>
<style scoped>
.upload-box {
    /* display: flex; */
    flex-wrap: wrap;
    width: 85%;
    margin:auto;
}
.upload-box .upload-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.02rem solid #d8d8d8;
        padding: 1rem 0;
}
.btn {
    width: 100%;
    border:0;
    position:fixed;
    bottom: 0;
    margin:0
}
.mint-popup-bottom {
    width: 100%;
}
.title {
    text-align: center;
    line-height: 4rem;
    font-size: 2rem;
}
.icon {
    font-size: 2rem;
    margin: 0 0.5rem;
    color: #F0463C;
}
.icon-1 {
    color: red;
}
.checkBox{
    text-align: center;
    line-height: 4rem;
    margin-bottom: 3rem;
}
.protocol{
    color: blue;
}
.selected{
    margin: 0;
    width: 100%;
    background: #fff;
    color: #333;
    text-align: center;
    line-height: 3rem;
}
.picker-slot {
    font-size: 1rem;
}
.mint-checklist-title{
    font-size: 0.8rem;
}
.mint-cell{
    font-size: 1rem;
}
.check-pro{
    width: 1rem;
    height: 1rem;
    margin: 0 1rem 0 0;
    position: relative;
}
.check-pro::after{
        position: absolute;
        width: 1.4rem;
        height: 1.4rem;
        top: -0.1rem;
        content: "";
        background: #F0463C;
        color: #fff;
        display: inline-block;
        border-radius: 0.2rem;
        text-align: center;
        line-height: 1.4rem;
}
.check-pro:checked::after{
        content: "✓";
}
</style>